import React from 'react';
import { Skeleton, Row, Col, Card, Avatar, Tag, Icon, Divider, Rate } from 'antd';
import cn from 'classnames';
import styles from './index.less';

const RecordCard = props => {
    const {
        toFixOne,
        record = {},
        loading = false,
        result = '',
        avatarUrlMap = {},
        handleDetail,
        finalScore,
        getResolveResult
    } = props;
    const title = (name, role) => (
        <>
            <span className={styles.recordName}>{name}</span>
            {role && <Tag>{role}</Tag>}
        </>
    );

    const unitContent = (cnt, showRate, isReScoreApply = false) => (
        <>
            {cnt.scoreState === 0 && (
                <div className={cn(styles.contentTitle, styles.primaryColor)}>
                    <Divider type="vertical" /> 待评分
                </div>
            )}
            {cnt.scoreState === 2 && (
                <div className={cn(styles.contentTitle, styles.redColor)}>
                    <Divider type="vertical" /> 放弃评分
                </div>
            )}
            {cnt.scoreState === 3 && (
                <div className={cn(styles.contentTitle, styles.primaryColor)}>
                    <Divider type="vertical" /> 待重评
                </div>
            )}
            <div style={{ marginLeft: cnt.scoreState !== 1 ? '15px' : 0 }}>
                {showRate && cnt.scoreState === 1 && (
                    <div className={styles.rateBlock}>
                        <div>综合评分{cnt.comprehensiveScore ? `：${toFixOne(cnt.comprehensiveScore)}` : ''}</div>
                        <Rate allowHalf disabled value={getResolveResult(cnt.comprehensiveScore)}></Rate>
                    </div>
                )}
                <div>{cnt.content}</div>
                <div className={styles.attachFile}>
                    {cnt[isReScoreApply ? 'taskReScoreFile' : 'taskScoreFile'].map(item => (
                        <div className={styles.fileName}>
                            <div>
                                <a href={item.url}>{item.originName}</a>
                            </div>
                            <div>
                                <a href={item.url}>
                                    <Icon type="download"></Icon>
                                </a>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </>
    );

    const nestedUnit = (aUrlMap, rcd, idx) => {
        const isReApply = idx % 2 === 0;
        return (
            <div>
                {isReApply && idx !== 0 && <Divider type="horizontal" />}
                {isReApply && (
                    <div className={cn(styles.contentTitle, styles.primaryColor)}>
                        <Divider type="vertical" /> 重评申请
                    </div>
                )}
                {!isReApply && (
                    <div className={cn(styles.contentTitle, styles.primaryColor)}>
                        <Divider type="vertical" /> 重评结果
                    </div>
                )}
                <div className={styles.nestedContent}>
                    <div className={styles.recordTime}>{rcd.finishTime}</div>
                    <div className={styles.avatarLine}>
                        <Avatar
                            icon="user"
                            size="small"
                            src={aUrlMap[rcd.employeeCode]}
                            className={styles.nestedAvatar}
                        />
                        {title(rcd.employeeName, rcd.roleName)}
                    </div>

                    <div>{unitContent(rcd, rcd.scoreState === 1, isReApply)}</div>
                </div>
            </div>
        );
    };

    const basicScoreUnit = (atrUrlMap, rcd) => {
        const haveReScoreData = rcd.reScoreDetails && rcd.reScoreDetails.length > 0;
        return (
            <div>
                <div className={styles.recordTime}>{rcd.finishTime}</div>
                <Card.Meta
                    avatar={<Avatar icon="user" src={atrUrlMap[rcd.employeeCode]} />}
                    title={title(rcd.employeeName, rcd.roleName)}
                    description={
                        <>
                            {unitContent(rcd, !!haveReScoreData)}
                            {haveReScoreData &&
                                rcd.reScoreDetails.map((reScoreItem, index) =>
                                    nestedUnit(atrUrlMap, reScoreItem, index)
                                )}
                        </>
                    }
                />
            </div>
        );
    };

    const hasReRateInfo = record.reScoreDetails?.length > 0;

    return (
        <Skeleton loading={loading} avatar active>
            <Row className={styles.recordCard} type="flex">
                <Col className={styles.content} span={16}>
                    {basicScoreUnit(avatarUrlMap, record)}
                </Col>
                <Col
                    span={8}
                    className={styles.result}
                    style={{
                        height: hasReRateInfo ? '130px' : '',
                        margin: hasReRateInfo ? 'auto 0' : ''
                    }}
                >
                    <div className={styles.resultContent}>{result}</div>
                    {!!finalScore && (
                        <div
                            className={cn(styles.mask, {
                                [styles.mask_full]: !hasReRateInfo,
                                [styles.mask_part]: hasReRateInfo
                            })}
                            onClick={() => {
                                if (hasReRateInfo) {
                                    const targetRecord = record.reScoreDetails[record.reScoreDetails.length - 1];
                                    return handleDetail({ ...targetRecord, taskScoreDetailId: targetRecord.id }, true);
                                }
                                return handleDetail(record);
                            }}
                        >
                            <div className={styles.maskContent}>
                                <div>
                                    <Icon className={styles.eye} type="eye"></Icon>
                                </div>
                                <div>查看详情</div>
                            </div>
                        </div>
                    )}
                </Col>
            </Row>
        </Skeleton>
    );
};

export default RecordCard;
